feat(FR-2862): add preset mode for deployment revision creation by agatha197 · Pull Request #7350 · lablup/backend.ai-webui

agatha197 · 2026-05-11T15:39:40Z

Test

10.122.10.215

e2e-cpu-http-server preset makes a helathy route.

Summary

Implements M2 and M3 of FR-2862 ("Deployment Revision Preset Mode UX").

M2 — VFolder Deploy: preset selector

VFolderDeployModal now requires a deployment-revision preset; resource group + replicas/openToPublic are still configurable but image/runtime/cluster/resources/env are sourced from the selected preset.
Submits via deployVfolderV2 (single-shot deployment + initial revision) and polls the new endpoint until it appears in the v1 store.
Empty-preset state: shows a banner with a link that opens the deployment preset creation modal directly.
Entry points wired: VFolderNodes, VFolderNodesV2, ModelCardDrawer, ModelCardDeployModal.

M3 — Add Revision: Preset / Custom modes

DeploymentAddRevisionModal now opens in Preset mode by default; an antd Segmented switches to Custom mode (the legacy advanced form).
Mode preference persists per-user via useBAISettingUserState('deploymentRevisionCreationMode').
Preset → Custom carries the user's preset selection forward by reading an @inline Relay fragment with readInlineData and prefilling the custom form (cluster, image, runtime, resources, environ, replicas, public flag).
Removed the previous auto-prefill from the current revision. The Custom body now surfaces an Alert action ("Load current revision") that the user must click explicitly. The Alert is gated on the deployment having a current revision.

Structural refactor

Split the previous monolithic DeploymentAddRevisionFormContents.tsx into two co-located bodies:
- DeploymentAddRevisionCustomContent.tsx — Custom-mode form + addModelRevision mutation.
- DeploymentAddRevisionPresetContent.tsx — Preset-mode form + deployVfolderV2 mutation.
  Each body owns its own fragment, mutation, and form values type. The modal wrapper now only hosts the segmented control, the shared useLazyLoadQuery, and the Preset → Custom transfer bridge.
Removed the now-unused legacy DeploymentLauncherPage / DeploymentLauncherPageContent (≈2,000 lines), whose responsibilities are subsumed by the modal-based flows above.
Validation guard: explicit form.validateFields().then(...) immediately before each create/deploy mutation (commitAdd in Custom, commitDeploy in Preset) so the rule "validate before any deploy/commit mutation" holds at the mutation call site, not just at the onFinish boundary. The modal's handleOk also validates before form.submit().

Test plan

VFolder → Deploy: empty-presets banner opens the create-preset modal.
VFolder → Deploy: select a preset, submit; endpoint detail page opens after the v1 store catches up.
Deployment detail → Add revision: opens in Preset mode by default.
Switch Preset → Custom: carry-over preset values appear in the custom form.
Toggle Preset ⇄ Custom multiple times; persisted mode survives reload.
Custom mode: clicking "Load current revision" prefills the form; modal opened with no current revision hides the Alert.
Preset / Custom: submitting with an invalid field scrolls to the first error and does not fire the mutation.

agatha197 · 2026-05-11T15:39:53Z

fix(FR-2901): sync deployment revision state in Relay store after activate / auto-activate #7428
feat(FR-2891): move resource group to deployment metadata, wire new ModelReplica status fields #7407
refactor(FR-2862): merge deployment Content components into Modal components #7403
feat(FR-2889): auto-select default resource group in deployment modals #7402
feat(FR-2888): add BAIRuntimeVariantSelect and remove runtimeVariants block from DeploymentAddRevisionModalQuery #7400
feat(FR-2886): add BAIAvailablePresetSelect and BAIProjectVfolderSelect, migrate deployment callers #7396
fix(FR-2869): lazy-load model card drawer details to speed up ModelStoreListPageV2 #7363
feat(FR-2862): add preset mode for deployment revision creation #7350 👈 (View in Graphite)
feat(FR-2863): add deployment revision preset mode UX feature spec #7349
main

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

flow:merge-queue - adds this PR to the back of the merge queue
flow:hotfix - for urgent changes, fast-track this PR to the front of the merge queue

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has required the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

Copilot

Pull request overview

Implements FR-2862 “Deployment Revision Preset Mode UX” across quick-deploy entry points and the add-revision flow, adding a Preset/Custom mode switch with persisted user preference and supporting UI empty states.

Changes:

Extend quick deploy to support both VFolder and Model Card contexts via useDeploymentLauncher.
Add Preset/Custom mode switching (persisted in user settings) to DeploymentAddRevisionModal, including Preset→Custom transfer prefill and explicit “Load current revision” action.
Add i18n strings for the new preset-mode UX across all supported locales and update the local GraphQL schema snapshot.

Reviewed changes

Copilot reviewed 30 out of 30 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
react/src/hooks/useDeploymentLauncher.ts	Adds model-card quick deploy support and refactors Quick Deploy input shape.
react/src/hooks/useBAISetting.tsx	Persists per-user revision creation mode setting (`deploymentRevisionCreationMode`).
react/src/components/VFolderNodes.tsx	Wires empty-preset fallback to open `DeploymentSettingModal`.
react/src/components/VFolderNodesV2.tsx	Same as above for the V2 nodes surface.
react/src/components/VFolderDeployModal.tsx	Adds empty-preset inline guidance and adjusts post-deploy navigation behavior.
react/src/components/ModelCardDrawer.tsx	Enables model-card quick deploy and wires empty-preset fallback to `DeploymentSettingModal`.
react/src/components/ModelCardDeployModal.tsx	Adds empty-preset inline guidance and adjusts post-deploy navigation behavior.
react/src/components/DeploymentAddRevisionModal.tsx	Adds Preset/Custom segmented mode, persisted preference, preset→custom transfer, and explicit “Load current revision”.
data/schema.graphql	Updates local GraphQL schema snapshot (notably model-definition related input nullability).
resources/i18n/en.json	Adds new deployment preset-mode related strings.
resources/i18n/zh-TW.json	Adds new deployment preset-mode related strings.
resources/i18n/zh-CN.json	Adds new deployment preset-mode related strings.
resources/i18n/vi.json	Adds new deployment preset-mode related strings.
resources/i18n/tr.json	Adds new deployment preset-mode related strings.
resources/i18n/th.json	Adds new deployment preset-mode related strings.
resources/i18n/ru.json	Adds new deployment preset-mode related strings.
resources/i18n/pt.json	Adds new deployment preset-mode related strings.
resources/i18n/pt-BR.json	Adds new deployment preset-mode related strings.
resources/i18n/pl.json	Adds new deployment preset-mode related strings.
resources/i18n/ms.json	Adds new deployment preset-mode related strings.
resources/i18n/mn.json	Adds new deployment preset-mode related strings.
resources/i18n/ko.json	Adds new deployment preset-mode related strings.
resources/i18n/ja.json	Adds new deployment preset-mode related strings.
resources/i18n/it.json	Adds new deployment preset-mode related strings.
resources/i18n/id.json	Adds new deployment preset-mode related strings.
resources/i18n/fr.json	Adds new deployment preset-mode related strings.
resources/i18n/fi.json	Adds new deployment preset-mode related strings.
resources/i18n/es.json	Adds new deployment preset-mode related strings.
resources/i18n/el.json	Adds new deployment preset-mode related strings.
resources/i18n/de.json	Adds new deployment preset-mode related strings.

agatha197 · 2026-05-13T03:43:23Z

@nowgnuesLee Following up on the earlier feedback that the modal should use deferredOpen + modal loading rather than a top-level Suspense: the latest commit honors that.

The Suspense boundary was removed from DeploymentAddRevisionModal.tsx entirely. The modal body is back to a plain conditional render between PresetContent and CustomContent, with the existing useDeferredValue driving the modal's loading state as you suggested.

The reason a local boundary was still needed somewhere is that ImageEnvironmentSelectFormItems (inside CustomContent) calls useLazyLoadQuery on first mount when switching Preset → Custom. Without a nearby boundary that suspension bubbles up to the outer DeploymentDetailPage Suspense and freezes the whole page. So the boundary moved down into DeploymentAddRevisionCustomContent.tsx — wrapping only <ImageEnvironmentSelectFormItems />, mirroring the existing in-file pattern around ResourceAllocationFormItems / VFolderTableFormItem.

Net effect: no Suspense in the modal layer, the page no longer suspends on mode switch, and the fallback is confined to the form section that's actually fetching.

ironAiken2

If there is only one deployment preset, the deployment is created directly based on the preset without selecting it; however, this means that settings such as the resource group cannot be configured. Even if there is only one preset, it should be possible to select both the preset and the resource group.

ironAiken2

The modal footer does not currently have a border. This may compromise UI consistency with other modals. You should modify the modal UI by referring to other components.

ironAiken2

I don’t think there needs to be a ‘Create’ button within the notification. Personally, I think it would be better to include just a brief summary in the notification and display the details in the body of the modal. The ‘Create’ button could simply be labelled ‘배포 생성’ and placed next to the ‘Cancel’ button.

ironAiken2

When I click the 'Create Revision' button on the deployment details page, the page enters a state of suspense. The suspense related to fetching the necessary data in the modal should occur within the creation modal itself.

nowgnuesLee

LGTM

agatha197 · 2026-05-14T07:05:30Z

@ironAiken2 Thanks for the careful review. Each of the four points has been addressed across this stack — the changes ended up across follow-up PRs in the stack so this PR's diff doesn't reflect them all. Summary:

1. Single-preset auto-deploy bypasses resource group selection
Auto-deploy now triggers only when both availablePresets.length === 1 and resourceGroups.length === 1. With multiple resource groups present, the modal is always shown so the user can choose a resource group. Additionally, FR-2889 (PR #7402) adds autoSelectDefault to BAIProjectResourceGroupSelect, so the default resource group is pre-selected while still allowing the user to change it.

2. Modal footer has no border (UI consistency)
The footer was redesigned across the stack — the "Auto-activate" checkbox now lives in the footer alongside Cancel/OK, and the layout uses BAIFlex justify="between". This matches the consistent footer treatment used by other modals in the project. If you still see a missing border in the current build, please let me know which modal/page and I'll align it.

3. "Create" button placement / labelling in notification
The deploy flow no longer shows a "create" CTA inside a notification. After a successful deploy, the modal closes and the user is navigated directly to /deployments/${deploymentId}. The success feedback is now a single-line message.success("배포가 생성되었습니다.") (see FR-2891 PR #7407 for the i18n update).

4. Clicking "Create Revision" puts the parent page into Suspense
Fixed in commits 75b0a6ce0 (refactor: merge deployment Content components into Modal components, PR #7403) and 1909c9ed7 (fix: trigger deploy/add mutation by calling form.submit() directly). The modal now uses useDeferredValue(open) + loading={deferredOpen !== open} on BAIModal, so all data fetching for the modal happens inside the modal's own loading state, not on the parent page.

Re-requesting your review when you have a moment.

ironAiken2

LGTM

graphite-app · 2026-05-15T07:55:56Z

Merge activity

May 15, 7:55 AM UTC: yomybaby added this pull request to the Graphite merge queue.
May 15, 8:04 AM UTC: Merged by the Graphite merge queue.

Resolves #7347 (FR-2862) ## Test ``` 10.122.10.215 ``` `e2e-cpu-http-server` preset makes a helathy route. ## Summary Implements **M2** and **M3** of FR-2862 ("Deployment Revision Preset Mode UX"). ### M2 — VFolder Deploy: preset selector - `VFolderDeployModal` now requires a deployment-revision **preset**; resource group + replicas/openToPublic are still configurable but image/runtime/cluster/resources/env are sourced from the selected preset. - Submits via `deployVfolderV2` (single-shot deployment + initial revision) and polls the new endpoint until it appears in the v1 store. - Empty-preset state: shows a banner with a link that opens the deployment preset creation modal directly. - Entry points wired: `VFolderNodes`, `VFolderNodesV2`, `ModelCardDrawer`, `ModelCardDeployModal`. ### M3 — Add Revision: Preset / Custom modes - `DeploymentAddRevisionModal` now opens in **Preset mode** by default; an antd `Segmented` switches to **Custom mode** (the legacy advanced form). - Mode preference persists per-user via `useBAISettingUserState('deploymentRevisionCreationMode')`. - Preset → Custom carries the user's preset selection forward by reading an `@inline` Relay fragment with `readInlineData` and prefilling the custom form (cluster, image, runtime, resources, environ, replicas, public flag). - Removed the previous auto-prefill from the current revision. The Custom body now surfaces an `Alert` action ("Load current revision") that the user must click explicitly. The Alert is gated on the deployment having a current revision. ### Structural refactor - **Split** the previous monolithic `DeploymentAddRevisionFormContents.tsx` into two co-located bodies: - `DeploymentAddRevisionCustomContent.tsx` — Custom-mode form + `addModelRevision` mutation. - `DeploymentAddRevisionPresetContent.tsx` — Preset-mode form + `deployVfolderV2` mutation. Each body owns its own fragment, mutation, and form values type. The modal wrapper now only hosts the segmented control, the shared `useLazyLoadQuery`, and the Preset → Custom transfer bridge. - **Removed** the now-unused legacy `DeploymentLauncherPage` / `DeploymentLauncherPageContent` (≈2,000 lines), whose responsibilities are subsumed by the modal-based flows above. - **Validation guard**: explicit `form.validateFields().then(...)` immediately before each create/deploy mutation (`commitAdd` in Custom, `commitDeploy` in Preset) so the rule "validate before any deploy/commit mutation" holds at the mutation call site, not just at the `onFinish` boundary. The modal's `handleOk` also validates before `form.submit()`. ## Test plan - [ ] VFolder → Deploy: empty-presets banner opens the create-preset modal. - [ ] VFolder → Deploy: select a preset, submit; endpoint detail page opens after the v1 store catches up. - [ ] Deployment detail → Add revision: opens in Preset mode by default. - [ ] Switch Preset → Custom: carry-over preset values appear in the custom form. - [ ] Toggle Preset ⇄ Custom multiple times; persisted mode survives reload. - [ ] Custom mode: clicking "Load current revision" prefills the form; modal opened with no current revision hides the Alert. - [ ] Preset / Custom: submitting with an invalid field scrolls to the first error and does not fire the mutation.

github-actions Bot assigned agatha197 May 11, 2026

agatha197 mentioned this pull request May 11, 2026

feat(FR-2863): add deployment revision preset mode UX feature spec #7349

Merged

3 tasks

github-actions Bot added area:ux UI / UX issue. area:i18n Localization size:XL 500~ LoC labels May 11, 2026

agatha197 force-pushed the 05-12-feat_fr-2862_add_preset_mode_for_deployment_revision_creation branch 4 times, most recently from 8b53b30 to d07caa2 Compare May 11, 2026 16:28

agatha197 force-pushed the 05-11-feat_fr-2863_add_deployment_revision_preset_mode_ux_feature_spec branch from 39b98b4 to f011f2c Compare May 11, 2026 16:52

agatha197 force-pushed the 05-12-feat_fr-2862_add_preset_mode_for_deployment_revision_creation branch from d07caa2 to 6d245d1 Compare May 11, 2026 16:52

agatha197 marked this pull request as ready for review May 11, 2026 16:53

Copilot AI review requested due to automatic review settings May 11, 2026 16:53

Copilot started reviewing on behalf of agatha197 May 11, 2026 16:54 View session

Copilot AI reviewed May 11, 2026

View reviewed changes

Comment thread react/src/hooks/useDeploymentLauncher.ts Outdated

Comment thread react/src/components/DeploymentAddRevisionModal.tsx Outdated

Comment thread react/src/components/DeploymentAddRevisionModal.tsx Outdated

Comment thread react/src/components/VFolderDeployModal.tsx

agatha197 force-pushed the 05-12-feat_fr-2862_add_preset_mode_for_deployment_revision_creation branch from 6d245d1 to e0f2e74 Compare May 11, 2026 17:39

agatha197 requested review from ironAiken2, nowgnuesLee and yomybaby May 11, 2026 17:41

agatha197 force-pushed the 05-11-feat_fr-2863_add_deployment_revision_preset_mode_ux_feature_spec branch from f011f2c to 9cba66c Compare May 11, 2026 17:44

agatha197 force-pushed the 05-12-feat_fr-2862_add_preset_mode_for_deployment_revision_creation branch 3 times, most recently from 3fd0291 to 4a9752b Compare May 12, 2026 02:13

agatha197 marked this pull request as draft May 12, 2026 02:20

agatha197 force-pushed the 05-12-feat_fr-2862_add_preset_mode_for_deployment_revision_creation branch 4 times, most recently from c0fca8c to e05d1cf Compare May 12, 2026 05:24

agatha197 marked this pull request as ready for review May 12, 2026 05:33

agatha197 force-pushed the 05-12-feat_fr-2862_add_preset_mode_for_deployment_revision_creation branch from 6f6a62e to 2d1e5f3 Compare May 13, 2026 03:46

agatha197 mentioned this pull request May 13, 2026

feat(FR-2889): auto-select default resource group in deployment modals #7402

Merged

5 tasks

ironAiken2 requested changes May 13, 2026

View reviewed changes

This was referenced May 13, 2026

refactor(FR-2862): merge deployment Content components into Modal components #7403

Merged

feat(FR-2891): move resource group to deployment metadata, wire new ModelReplica status fields #7407

Merged

nowgnuesLee approved these changes May 14, 2026

View reviewed changes

agatha197 force-pushed the 05-11-feat_fr-2863_add_deployment_revision_preset_mode_ux_feature_spec branch from 3b92854 to d5362fa Compare May 14, 2026 05:21

agatha197 force-pushed the 05-12-feat_fr-2862_add_preset_mode_for_deployment_revision_creation branch from 2d1e5f3 to 4ae0e6e Compare May 14, 2026 05:22

agatha197 requested a review from ironAiken2 May 14, 2026 07:05

agatha197 force-pushed the 05-11-feat_fr-2863_add_deployment_revision_preset_mode_ux_feature_spec branch from d5362fa to af26e26 Compare May 14, 2026 07:32

agatha197 force-pushed the 05-12-feat_fr-2862_add_preset_mode_for_deployment_revision_creation branch from 4ae0e6e to 848777e Compare May 14, 2026 07:32

agatha197 force-pushed the 05-11-feat_fr-2863_add_deployment_revision_preset_mode_ux_feature_spec branch from af26e26 to e7629e7 Compare May 14, 2026 10:00

agatha197 force-pushed the 05-12-feat_fr-2862_add_preset_mode_for_deployment_revision_creation branch from 848777e to da4c026 Compare May 14, 2026 10:00

ironAiken2 approved these changes May 15, 2026

View reviewed changes

yomybaby mentioned this pull request May 15, 2026

fix(FR-2901): sync deployment revision state in Relay store after activate / auto-activate #7428

Merged

4 tasks

agatha197 force-pushed the 05-11-feat_fr-2863_add_deployment_revision_preset_mode_ux_feature_spec branch from e7629e7 to 66c0579 Compare May 15, 2026 07:45

agatha197 force-pushed the 05-12-feat_fr-2862_add_preset_mode_for_deployment_revision_creation branch from da4c026 to 63ca4d7 Compare May 15, 2026 07:45

graphite-app Bot force-pushed the 05-11-feat_fr-2863_add_deployment_revision_preset_mode_ux_feature_spec branch from 66c0579 to 2dd95fa Compare May 15, 2026 07:56

graphite-app Bot force-pushed the 05-12-feat_fr-2862_add_preset_mode_for_deployment_revision_creation branch from 63ca4d7 to ccb8d84 Compare May 15, 2026 07:57

Base automatically changed from 05-11-feat_fr-2863_add_deployment_revision_preset_mode_ux_feature_spec to main May 15, 2026 08:02

graphite-app Bot merged commit ccb8d84 into main May 15, 2026
7 checks passed

graphite-app Bot deleted the 05-12-feat_fr-2862_add_preset_mode_for_deployment_revision_creation branch May 15, 2026 08:04

github-pages Bot temporarily deployed to github-pages May 15, 2026 08:04 Inactive

Conversation

agatha197 commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test

Summary

M2 — VFolder Deploy: preset selector

M3 — Add Revision: Preset / Custom modes

Structural refactor

Test plan

Uh oh!

agatha197 commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

agatha197 commented May 13, 2026

Uh oh!

ironAiken2 left a comment

Choose a reason for hiding this comment

Uh oh!

ironAiken2 left a comment

Choose a reason for hiding this comment

Uh oh!

ironAiken2 left a comment

Choose a reason for hiding this comment

Uh oh!

ironAiken2 left a comment

Choose a reason for hiding this comment

Uh oh!

nowgnuesLee left a comment

Choose a reason for hiding this comment

Uh oh!

agatha197 commented May 14, 2026

Uh oh!

ironAiken2 left a comment

Choose a reason for hiding this comment

Uh oh!

graphite-app Bot commented May 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

agatha197 commented May 11, 2026 •

edited

Loading

agatha197 commented May 11, 2026 •

edited

Loading

graphite-app Bot commented May 15, 2026 •

edited

Loading